import { ConfigProvider, Spin } from "@arco-design/web-react";
import zhCN from "@arco-design/web-react/es/locale/zh-CN";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import ReactDOM from "react-dom/client";
import { App, NotFound } from "./components";
import "./index.css";
import { routeTree } from "./routeTree.gen";

const router = createRouter({
	routeTree,
	// scrollRestoration: true,
	// scrollToTopSelectors: ['.main-keep-alive-render'],
	// getScrollRestorationKey: (location) => location.href,
	defaultNotFoundComponent: () => <NotFound />,
	defaultPendingComponent: () => <Spin loading />,
});

// Register the router instance for type safety
declare module "@tanstack/react-router" {
	interface Register {
		router: typeof router;
	}
}

const queryClient = new QueryClient();

const rootEl = document.getElementById("root");
if (rootEl) {
	const root = ReactDOM.createRoot(rootEl);
	root.render(
		// <React.StrictMode>
		<ConfigProvider
			size="mini"
			locale={zhCN}
			componentConfig={{
				Table: {
					pagination: {
						defaultPageSize: 20,
						showTotal: true,
						sizeCanChange: true,
						sizeOptions: [10, 20, 30, 40, 50, 100, 200, 300, 500, 1000],
					},
				},
			}}
		>
			<App>
				<QueryClientProvider client={queryClient}>
					<RouterProvider router={router} />
				</QueryClientProvider>
			</App>
		</ConfigProvider>,
		//	</React.StrictMode>
	);
}
